<template>
    <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="原来的密码" prop="orgPass">
                <el-input type="password" v-model="ruleForm.orgPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPass">
                <el-input type="password" v-model="ruleForm.newPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {request} from '@/network/request.js';
export default {
    name:"changePassword",
    data(){
        return {
            ruleForm:{
                orgPass:"",
                newPass:"",
                checkPass:""
            },
            rules:{
                orgPass:[
                    {
                        validator:(rule, value, callback)=>{
                            if(value===""||value.trim()===""){
                                callback(new Error('请输入密码，不包含空格'));
                            }else{
                                callback();
                            }
                        },
                        trigger:'blur'
                    }
                ],
                newPass:[
                    {
                        validator:(rule, value, callback)=>{
                            if (value === '') {
                                callback(new Error('请输入密码'));
                            } else {
                                if (this.ruleForm.checkPass !== '') {
                                this.$refs.ruleForm.validateField('checkPass');
                                }
                                callback();
                            }
                        },
                        trigger:'blur'
                    }
                ],
                checkPass:[
                    {
                        validator:(rule, value, callback)=>{
                            if (value === '') {
                                callback(new Error('请再次输入密码'));
                            } else if (value !== this.ruleForm.newPass) {
                                callback(new Error('两次输入密码不一致!'));
                            } else {
                                callback();
                            }
                        },
                        trigger:'blur'
                    }
                ]
            }
        }
    },
    methods:{
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                request({
                    url:"/user/verifyUserPassword/"+this.$store.getters.getCurrentUser.email+"/"+this.ruleForm.orgPass
                }).then(res=>{
                    if(res.data.verifySuccess){
                            request({
                            url:"/user/changePassword",
                            method:"post",
                            data:{
                                email:this.$store.getters.getCurrentUser.email,
                                newPassword:this.ruleForm.newPass
                            }
                        }).then(res=>{
                            this.$message({
                                message: '恭喜你，密码更改成功',
                                type: 'success'
                                });
                        }).catch(err=>{
                            this.$message.error('更改失败请稍后再试');
                        })
                    }else{
                        this.$alert('原密码输入错误请重新输入', '警告', {
                        confirmButtonText: '确定',
                        callback: action => {
                        }
                        });
                    }
                }).catch(err=>{
                    this.$message.error('服务器忙请稍后再试');
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style>

</style>